<template>
  <div class="dynamic">
    <!-- tab切换+搜索 -->
    <van-nav-bar fixed placeholder z-index="99">
      <template #left>
        <van-tabs v-model:active="active" title-active-color="red" :shrink="true" swipeable>
          <van-tab
            v-for="item in tabList"
            :key="item.key"
            :title="item.name"
            :name="item.key"
            :to="`/dynamic/${item.key}`"
          ></van-tab>
        </van-tabs>
      </template>
      <template #right>
        <van-icon name="search" size="30" color="#eeeeee" />
      </template>
    </van-nav-bar>
    <!-- 子路由切换 -->
    <div>
      <router-view />
    </div>
  </div>
</template>

<script>
import { ref, onBeforeMount, readonly} from 'vue'
import { useRouter } from 'vue-router'
export default {
  name: 'dynamic',
  setup() {
    const route = useRouter()
    const active = ref(route.currentRoute.value.name)
    const tabList = readonly([
      { key: 'concern', name: '关注' },
      { key: 'recommend', name: '推荐' },
      { key: 'sameCity', name: '同城' }
    ])
    onBeforeMount(() => {})
    
    return {
      active,
      tabList
    }
  }
}
</script>

<style scoped lang='scss'>

</style>